<template>
  <div class="user">
    <div class="titletext">出库确认</div>
    <div class="chaxun">入库查询</div>
    <div class="search">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="用户ID">
          <el-input v-model="formInline.user" />
        </el-form-item>
        <el-form-item label="用户名称">
          <el-input v-model="formInline.user" />
        </el-form-item>
        <el-form-item>
          <el-button @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="list">
      <el-table
        ref="multipleTableRef"
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="card" label="出库单号" width="180">
          <!-- <template #default="scope">{{ scope.row.date }}</template> -->
        </el-table-column>

        <el-table-column prop="master" label="货主" />
        <el-table-column prop="chu" label="出库托盘个数" width="180" />
        <el-table-column prop="cang" label="仓库" />
        <el-table-column prop="date" label="业务时间" width="180" />
        <el-table-column prop="spay" label="备注" />
        <el-table-column prop="delete" label="是否删除" />
        <el-table-column prop="true" label="出库确认" />
      </el-table>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive } from "vue";
import { ref } from "vue";
import type { ElTable } from "element-plus";

const formInline = reactive({
  user: "",
  region: "",
});
interface User {
  userId: number;
  name: string;
  account: string;
}

const onSubmit = () => {
  console.log("submit!");
};

const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref<User[]>([]);
const toggleSelection = (rows?: User[]) => {
  if (rows) {
    rows.forEach((row) => {
      // TODO: improvement typing when refactor table
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      multipleTableRef.value!.toggleRowSelection(row, undefined);
    });
  } else {
    multipleTableRef.value!.clearSelection();
  }
};
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val;
};
const tableData = [
  {
    card: "11122233",
    settle: "小王",
    master: "小黑",
    date: "2016-08-06 10:16:03",
    chu: "2",
    cang: "4",
    spay: "积泥太美",
    state: "入库完成",
    delete: "否",
  },
  {
    card: "00002233",
    settle: "小王",
    master: "白玉",
    date: "2018-09-30 18:23:46",
    spay: "积泥太美",
    chu: "2",
    cang: "4",
    state: "结算完成",
    delete: "否",
  },
];
</script>
<style scoped>
.list {
  margin-top: 10px;
  margin-bottom: 10px;
  width: 100%;
  overflow: auto;
  border: 1px solid #ddd;
}
.search {
  height: 50px;
  line-height: 65px;
  margin: 0 20px;
  display: inline-block;
  background-color: #f2f2f2;
  padding-left: 20px;
}
.bg {
  background-color: #f2f2f2;
}
.chaxun {
  margin-bottom: 5px;
  padding-left: 20px;
}
.user {
  width: 1000px;
  min-width: 1000px;
  height: 85vh;
  margin: 10px;
  overflow: auto;
  border: 1px solid #ddd;
  display: flex;
  flex-direction: column;
}
.titletext {
  color: #2e6095;
  height: 40px;
  line-height: 40px;
  padding-left: 25px;
  background-color: #f7f7f7;
  margin-bottom: 10px;
}
</style>
<style>
.bg {
  background-color: #f2f2f2;
}
</style>
